<template>
  <div class="page mycoupon-body">
    <custom title="我的优惠券" />
    <div class="list">
      <div v-for="item in activeList" :key="item.id" :class="['listBox', bottom.activeIndex == item.id ?'':'listBoxAct']" @click="onSwitchList(item.id)">
        <div></div>
        <div>{{ item.title }}</div>
        <div :class="['listBoxF', bottom.activeIndex == item.id ?'':'listBoxFAct']"></div>
      </div>
    </div>
    <div v-show="list.length>0" style="flex:1;overflow:hidden;">
      <BottomOut v-show="bottom.activeIndex == '0'" :loading="bottom.loading" :nomore="bottom.nomore" @loadBottom="onScroll">
        <div v-for="(item, index) in list" :key="index">
          <div class="box flex">
            <div :class="['boxleft', item.type==='1'?'':'boxleftOne']">
              <div><span class="boxleftVal">¥</span>{{ item.ruleSubtract/100 }}</div>
              <div class="boxleftTit">满{{ item.ruleFull/100 }}可用</div>
            </div>
            <div class="boxRight">
              <div class="boxRCont">
                <div class="boxContL">
                  <div class="flex bCLName">
                    <div :class="['bCLNameTag', item.type==='1'?'':'bCLNameTagOne']">{{ item.type==='1'?'满减券':'定额券' }}</div>
                    <div class="bCLNameTit exceedOne">{{ item.name }}</div>
                  </div>
                  <div class="bCLNameSign">{{ item.startTime }} ~ {{ item.endTime }}</div>
                </div>
                <div class="boxContR boxContRBg">
                  <div :class="['boxContRBut', item.type==='1'?'':'boxContRButOne']">立即使用</div>
                </div>
              </div>
              <!-- <div class="flex justify-sb boxRFoot" @click="isDetail = !isDetail">
                <div>详细信息</div>
                <div><van-icon :name="isDetail?'arrow-down':'arrow'" /></div>
              </div> -->
            </div>
          </div>
          <!-- <div v-show="isDetail" class="boxRemarks">
            <div>1、满100减10</div>
            <div>2、可与商家其他活动同时使用</div>
          </div> -->
        </div>
      </BottomOut>
      <BottomOut v-show="bottom.activeIndex == '1'" :loading="bottom.loading" :nomore="bottom.nomore" @loadBottom="onScroll">
        <div v-for="(item, index) in list" :key="index">
          <div class="box flex boxZH">
            <div :class="['boxleft', item.type==='1'?'':'boxleftOne']">
              <div><span class="boxleftVal">¥</span>{{ item.ruleSubtract/100 }}   10-20</div>
              <div class="boxleftTit">满{{ item.ruleFull/100 }}可用</div>
            </div>
            <div class="boxRight">
              <div class="boxRCont">
                <div class="boxContL">
                  <div class="flex bCLName">
                    <div :class="['bCLNameTag', item.type==='1'?'':'bCLNameTagOne']">{{ item.type==='1'?'满减券':'定额券' }}</div>
                    <div class="bCLNameTit exceedOne">{{ item.name }}</div>
                  </div>
                  <div class="bCLNameSign">{{ item.startTime }} ~ {{ item.endTime }}</div>
                </div>
                <div class="boxContR boxContRBg">
                  <img src="@/assets/couponUsed.png" alt="" class="boxContZHimg" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </BottomOut>
      <BottomOut v-show="bottom.activeIndex == '2'" :loading="bottom.loading" :nomore="bottom.nomore" @loadBottom="onScroll">
        <div v-for="(item, index) in list" :key="index">
          <div class="box flex boxGQ">
            <div class="boxleft boxleftGQ">
              <div><span class="boxleftVal">¥</span>{{ item.ruleSubtract/100 }}   10-20</div>
              <div class="boxleftTit">满{{ item.ruleFull/100 }}可用</div>
            </div>
            <div class="boxRight">
              <div class="boxRCont">
                <div class="boxContL">
                  <div class="flex bCLName">
                    <div class="bCLNameTag bCLNameTagGQ">{{ item.type==='1'?'满减券':'定额券' }}</div>
                    <div class="bCLNameTit exceedOne">{{ item.name }}</div>
                  </div>
                  <div class="bCLNameSign">{{ item.startTime }} ~ {{ item.endTime }}</div>
                </div>
                <div class="boxContR boxContRBg">
                </div>
              </div>
            </div>
          </div>
        </div>
      </BottomOut>
    </div>
    <div v-show="list.length<1" class="listEmtry">
      <div>暂无数据</div>
    </div>
  </div>
</template>

<script>
// 分页 , 满减卷  折扣卷
import custom from '@/components/custom.vue'
import { commonAjax } from 'Ajax'
export default {
  name: 'Coupon',
  components: { custom },
  data() {
    return {
      isDetail: false,
      activeList: [
        {
          title: '未使用',
          id: '0'
        }, {
          title: '已使用',
          id: '1'
        }, {
          title: '已过期',
          id: '2'
        }
      ],
      list: [],
      pageInfo: {
        pageSize: 10,
        totalPage: 1,
        currPage: 1
      },
      bottom: {
        activeIndex: '0',
        activeStatus: false,
        loading: false,
        nomore: false
      }
    }
  },
  mounted() {
    this.getListAjax('0')
  },
  methods: {
    getListAjax(status) {
      this.bottom.activeStatus = true
      const params = {
        'exportExcel': false,
        'pageNum': this.pageInfo.currPage,
        'pageSize': this.pageInfo.pageSize,
        'sortField': '', // 排序字段
        'sortOrder': 'asc', // 排序方向
        'status': status
      }
      commonAjax.couponList(params).then(res => {
        this.bottom.activeStatus = false
        this.list = res.list
        this.pageInfo.totalPage = res.totalPage
        this.pageInfo.currPage = res.currPage
      }, (error) => {
        console.log(error)
        this.bottom.activeStatus = false
        this.$toast('请您重新进入~')
      })
    },
    // 触底加载更多
    onScroll(e) {
      console.log('触底了---------------', e)
      // this.bottom.loading = true
      this.bottom.nomore = true
    },
    // 切换列表
    onSwitchList(id) {
      if (this.bottom.activeIndex === id || this.bottom.activeStatus) return // 函数节流
      this.list = []
      this.pageInfo.currPage = 1
      this.bottom.activeIndex = id
      this.getListAjax(id)
    }
  }
}
</script>

<style lang="less" scoped>
.page{
  background: #F2F2F2;
}
// .mycouponTop{
//   width: 100%;
//   z-index: 99;
//   position: fixed;
//   top: 0;
//   left: 0;
// }
.mycoupon-body {
  display: flex;
  flex-direction: column;
  .vant-tabs-mycoupon {
    font-family: PingFang SC;
    .van-tabs__wrap {
      height: 70px;
    }
    .vant-tab-mycoupon {
      height: 70px;
      span {
        height: 27px;
        line-height: 27px;
        font-size: 28px;
        font-weight: 500;
        color: #000000;
      }
    }
    .van-tabs__line {
      height: 6px;
      width: 53px;
      background: linear-gradient(98deg, #ef3814 0%, #ff8d13 100%);
      border-radius: 3px;
    }
  }
}
.box{
  width: 690px;
  height: 200px;
  margin: 30px auto 0;
  border: 1px solid #FFA775;
  border-radius: 16px;
  overflow: hidden;
  background: #FFFFFF;
  position: relative;
}
.boxZH{
  opacity: .5;
}
.boxGQ{
  border: 1px solid #A1A1A1;
}
.boxleft{
  width: 200px;
  height: 200px;
  background: linear-gradient(54deg, #EF3814 0%, #FF8D13 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  color: #fff;
}
.boxleftOne{
  background: linear-gradient(54deg, #EF8014 0%, #FFAE13 100%);
}
.boxleftGQ{
  background: #A8A8A8;
}
.boxleftVal{
  font-size: 34px;
}
.boxleftTit{
  font-size: 26px;
}
.boxRight{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.boxRCont{
  display: flex;

  width: 100%;
  height: 100%;
}
.boxRFoot{
  flex: 1;
  border-top: 1px solid #FFA775;
  align-items: center;
  justify-content: center;
  padding: 0 20px 0 26px;
  color: #393939;
}
.boxRFootGQ{
  border-top: 1px solid #A1A1A1;
}
.boxContL{
  width: 330px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.boxContR{
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.bCLName{
  margin: 24px 0 0 20px;
  color: #020202;
}
.bCLNameTag{
  padding: 0 8px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  background: #FFE5D6;
  opacity: 0.8;
  border-radius: 6px;
  color: #F86614;
  font-size: 20px;
  margin-right: 20px;
}
.bCLNameTagOne{
  background: #FFEDCB;
}
.bCLNameTagGQ{
  background: #E9E9E9;
  opacity: 0.8;
  color: #A8A8A8;
}
.bCLNameSign{
  margin: 0 0 30px 26px;
  font-size: 22px;
  font-weight: 400;
  color: #A5A5A5;
}
.bCLNameTit{
  width: 200px;
  font-size: 24px;
  font-weight: 600;
}
.boxContRBut{
  width: 140px;
  height: 44px;
  line-height: 44px;
  background: #F86614;
  border-radius: 12px;
  text-align: center;
  color: #fff;
  margin-bottom: 26px;
}
.boxContRButOne{
  background: #FBA313;
}
.boxContZHimg{
  width: 168px;
  height: 174px;
  display: block;
  position: absolute;
  top: -30px;
  right: -30px;
}
.boxRemarks{
  width: 608px;
  height: 74px;
  background: #fff;
  padding: 26px 0 26px 47px;
  margin: 0 auto;
  font-size: 22px;
  font-weight: 400;
  color: #393939;
}
.boxRemarksGQ{
  color: #393939;
}
.emtryFooter{
  width: 100%;
  height: 30px;
}

.list{
  width: 747px;
  height: 70px;
  background: #FFFFFF;
  display: flex;
  justify-content: space-around;
}
.listBox{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100px;
  height: 100%;
  font-size: 28px;
  font-weight: 600;
  color: #000000;
}
.listBoxAct{
  color: #888888;
}
.listBoxF{
  width: 53px;
  height: 6px;
  background: linear-gradient(98deg, #EF3814 0%, #FF8D13 100%);
  border-radius: 3px;
}
.listBoxFAct{
  background: #FFF;
}
.listEmtry{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #CACACA;
  font-size: 26px;
}
</style>
